<template>
	<view class="pb64">
		<view class="posif"><NavBar title="卡片遗失" bgColor="rgba(255,255,255,0)"></NavBar></view>
		<view class="top"></view>
		<view class="box auto dflex alc jcsa">
			<view class="dflex flexc alc" @click="openOne">
				<image src="../../static/guashi.png" mode=""></image>
				<view class="fs30 fw500 color">挂失</view>
			</view>
			<view class="dflex flexc alc" @click="openTwo">
				<image src="../../static/buban.png" mode=""></image>
				<view class="fs30 fw500 color">补办</view>
			</view>
		</view>
		<!-- 卡片信息 -->
		<view class="message-card auto mt20 pl30 pr30 borderbox">
			<view class="title fs32 fw900 color pt32">卡片信息</view>
			<view class="dflex alc jcsb mt80 fs28 fw500 color666">
				<view>学生姓名</view>
				<view>李莉莉</view>
			</view>
			<view class="dflex alc jcsb mt80 fs28 fw500 color666">
				<view>所在年级</view>
				<view>六年级</view>
			</view>
			<view class="dflex alc jcsb mt80 fs28 fw500 color666">
				<view>所在班级</view>
				<view>十二班</view>
			</view>
			<view class="dflex alc jcsb mt80 fs28 fw500 color666">
				<view>所在学习</view>
				<view>纬五路学校</view>
			</view>
			<view class="dflex alc jcsb mt80 fs28 fw500 color666">
				<view>余额</view>
				<view>206.66</view>
			</view>
			<view class="dflex alc jcsb mt80 fs28 fw500 color666 pb40">
				<view>家长手机</view>
				<view>18888888888</view>
			</view>
		</view>

		<!-- 挂失弹窗 -->
		<u-popup :show="showOne" mode="center" @close="close" :duration="300" round="20rpx">
			<view class="popupOne bannerbox">
				<view class="textc color fs40 fw900 pt50">提示</view>
				<view class="textc auto fs28 fw500 color mt40" :class="type === 1 ? 'w420' : 'w280'">
					{{
						type === 1
							? '点击挂失后，卡片将不能继续使用您确定要挂失吗'
							: '您的补卡信息已提交 我们将尽快处理'
					}}
				</view>
				<view class="btns dflex jcse mt60">
					<view class="textc color" @click="hangderErr">取消</view>
					<view class="textc white" @click="handerSuccess">确认</view>
				</view>
			</view>
		</u-popup>
		<!-- 挂失弹窗 -->
	</view>
</template>

<script>
import NavBar from '@/components/NavBar/NavBar.vue';
export default {
	components: { NavBar },
	data() {
		return {
			showOne: false,
			type: 0
		};
	},
	methods: {
		openOne() {
			this.type = 1;
			this.showOne = true;
		},
		openTwo() {
			this.type = 2;
			this.showOne = true;
		},
		close() {
			this.showOne = false;
		},
		hangderErr() {
			this.showOne = false;
		},
		handerSuccess() {
			this.showOne = false;
		}
	}
};
</script>

<style lang="scss">
.top {
	height: 420rpx;
	background-image: url('https://www.chejingjing.cn/uploads/imgs/20221221/c0e37f1c50208531e24da75e6fdbd44b.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.box {
	width: 690rpx;
	height: 242rpx;
	background: #ffffff;
	box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
	border-radius: 20rpx;
	margin-top: -30rpx;
	image {
		width: 126rpx;
		height: 126rpx;
	}
}
.message-card {
	width: 690rpx;
	background: #ffffff;
	box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.popupOne {
	width: 610rpx;
	height: 412rpx;
	background: #ffffff;
	border-radius: 20rpx;
}

.w420 {
	width: 420rpx;
}
.w280 {
	width: 280rpx;
}
.btns {
	& > view:nth-child(1) {
		width: 256rpx;
		height: 76rpx;
		background: #efefef;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		line-height: 76rpx;
	}
	& > view:nth-child(2) {
		width: 256rpx;
		height: 76rpx;
		background: #4151db;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		line-height: 76rpx;
	}
}
</style>
